{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">功能点信息</h2>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" name="user_search" class="form-control aa_search" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default" id="aa_search" aa_search="{{ search }}">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
            </button>
            <button type="button" class="btn btn-primary"
                    onclick="point_add()"><span
                    class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加功能点
            </button>
        </form>
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>名称</th>
                <th>描述</th>
                <th>sql文本</th>
                <th>是否有参数</th>
                <th>参数个数</th>
                {#                <th>参数类型</th>#}
                {#                <th>参数状态</th>#}
                <th>参数内容</th>
                <th>执行方式</th>
                <th>状态</th>
                <th>备注</th>
                <th>修改时间</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for i in current_page %}
                <tr>
                    <td style="display:none">{{ i.id }}</td>
                    <td>{{ i.name }}</td>
                    <td>{{ i.desc }}</td>
                    <td>
                        <a style="cursor:pointer" onclick="show_edit_sqltext({{ i.id }})"> 查看或修改sql文本</a>
                    </td>
                    <td>{{ i.args_mark | default_if_none:"" }}</td>
                    <td>{{ i.args_count | default_if_none:"" }}</td>
                    {#                    <td>{{ i.args_type| default_if_none:"" }}</td>#}
                    {#                    <td>{{ i.args_status| default_if_none:"" }}</td>#}
                    <td>{{ i.args_val | default_if_none:"" }}</td>
                    <td>{{ i.exec_type | default_if_none:"" }}</td>
                    <td>{{ i.status | default_if_none:"" }}</td>
                    <td>{{ i.remark | default_if_none:"" }}</td>
                    <td>{{ i.chtime }}</td>
                    <td>{{ i.crtime }}</td>
                    <td><a onclick="point_edit({{ i.id }})">编辑</a> | <a
                            onclick="if(confirm('确认删除吗？')==false)return false;  else point_delete({{ i.id }})">删除</a> |
                        <a
                                onclick="if(confirm('确认要锁定吗？')==false)return false;  else point_lock({{ i.id }})">锁定</a>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {#        以上是分页#}
        {% include 'basic_app/paginator.html' %}
    </div>

    <!-- 模态框（Modal） 显示sql文本内容-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1000px" id="docModalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">SQLTEXT 内容</h4>
                </div>
                <div>&nbsp</div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary"
                                                            onclick="sqltext_modify()" id="bt_sqltext_modify"><span
                    class="glyphicon glyphicon-wrench"
                    aria-hidden="true"></span> 修改
            </button>
                <button type="button" class="btn btn-primary" onclick="script_content_edit_submit()" disabled
                        id="bt_sqltext_commit"><span
                        class="glyphicon glyphicon-ok"
                        aria-hidden="true"></span> 提交
                </button>
                <div>&nbsp</div>
                <div class="col-sm-12">
                            <textarea id="script_content_edit" style="width:960px;height:710px" type="text_area"
                                      name="script_content_edit" placeholder="SQLTEXT"
                                      disabled>{{ i.sqltext }}</textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） 添加功能点-->
    <div class="modal fade" id="myModal_point_add_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1000px" id="docModalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加功能点</h4>
                </div>
                <div>&nbsp</div>
                <div>&nbsp</div>
                <form class="form-horizontal" id="editForm">
                    <div class="form-group" hidden>
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="v_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">name：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="add_name"
                                   placeholder="功能名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">sqltext：</label>
                        <div class="col-sm-10">
                    <textarea type="text" style="width:330px;" class="form-control" id="add_sqltext"
                              placeholder="sqltext"></textarea> <span style="color:red"> &nbsp&nbsp&nbsp&nbsp&nbsp格式:  [('sqltext1','select 1 from dual'),('sqltext2','select 2 from dual')]</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">desc：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="add_desc"
                                   placeholder="描述">
                        </div>
                    </div>
                    <div class="form-group" id="limit_status_div">
                        <label class="col-sm-2 control-label">args_mark(是否有参数)：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="add_args_mark">
                                <option>否</option>
                                <option>是</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="limit_status_div">
                        <label class="col-sm-2 control-label">args_count：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="add_args_count">
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">args_val：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="add_args_val"
                                   placeholder="参数内容">
                            <span style="color:red">&nbsp&nbsp&nbsp&nbsp&nbsp提示:多个数值用";"分开</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">exec_type(执行方式)：</label>
                        <div class="col-sm-3">
                            {#                    <select   class="form-control" id="exec_type" name="add_exec_type"  multiple="multiple">#}
                            <select class="form-control" id="add_exec_type">
                                <option>sql执行</option>
                                {#                        <option>shell执行</option>#}
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="status">
                        <label class="col-sm-2 control-label">status：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="add_status">
                                <option>active</option>
                                <option>locked</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">remake：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="add_remark"
                                   placeholder="备注">
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="point_commit()">提交</button>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

{% endblock %}

{% block script %}
    <script>
        //添加功能点
        function point_add() {
            //清空form下数据
            $("#editForm")[0].reset();
            //调用模态框
            $('#myModal_point_add_edit').modal('show')
        }
        //编辑功能点
        function point_edit(id) {
            var nid = id
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_point_info_ajax", //后台处理函数的url
                data: {
                    'nid': nid
                },
                cache: false,
                dataType: "json",
                success: function (result) {
                    $('#v_id').val(result.id);
                    $('#add_name').val(result.name);
                    $('#add_desc').val(result.desc);
                    $('#add_sqltext').val(result.sqltext);
                    $('#add_args_mark').val(result.args_mark);
                    $('#add_args_count').val(result.args_count);
                    $('#add_args_val').val(result.args_val);
                    //$('#add_exec_type').val(result.exec_type);
                    $('#add_status').val(result.status);
                    $('#add_remark').val(result.remark);
                    //调用模态框
                    $('#myModal_point_add_edit').modal('show')
                }
            })
        }
        //提交功能点
        function point_commit() {
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_add_point_ajax", //后台处理函数的url
                data: {
                    'id': $('#v_id').val(),
                    'add_name': $('#add_name').val(),
                    'add_desc': $('#add_desc').val(),
                    'add_sqltext': $('#add_sqltext').val(),
                    'add_args_mark': $('#add_args_mark').val(),
                    'add_args_count': $('#add_args_count').val(),
                    'add_args_val': $('#add_args_val').val(),
                    'add_exec_type': $('#add_exec_type').val(),
                    'add_status': $('#add_status').val(),
                    'add_remark': $('#add_remark').val()
                },
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading()
                },
                complete: function () {
                    hideLoading()
                },
                success: function (result) {
                    if (result == 'SUCCESS') {
                        location.reload()
                    } else {
                        alert(result)
                    }
                }
            })
        }
        //删除功能点
        function point_delete(id) {
           var  action_mark = 'delete'
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_delete_lock_ajax", //后台处理函数的url
                data: {
                    'id': id,
                    'action_mark':action_mark
                },
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading()
                },
                complete: function () {
                    hideLoading()
                },
                success: function (result) {
                    if (result == 'SUCCESS') {
                        location.reload()
                    } else {
                        alert(result)
                    }
                }
            })
        }
        //锁定功能点
        function point_lock(id) {
           var action_mark = 'lock'
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_delete_lock_ajax", //后台处理函数的url
                data: {
                    'id': id,
                    'action_mark':action_mark
                },
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading()
                },
                complete: function () {
                    hideLoading()
                },
                success: function (result) {
                    if (result == 'SUCCESS') {
                        location.reload()
                    } else {
                        alert(result)
                    }
                }
            })
        }


        //展示sqltext
        function show_edit_sqltext(id) {
            var nid = id
            $('#myModal').attr('nid', nid)
            $("#script_content_edit").prop('disabled', true);
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_getSqltext_ajax", //后台处理函数的url
                data: {
                    'nid': nid
                },
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#script_content_edit").val(result);
                    //调用模态框
                    $('#myModal').modal('show')
                }
            })
        }

        //sqltext变更为可编辑状态
        function sqltext_modify() {
            $("#bt_sqltext_modify").prop('disabled', true);
            $("#script_content_edit").removeAttr("disabled");
            $("#bt_sqltext_commit").removeAttr("disabled");
        }

        //提交sqltext
        function script_content_edit_submit(id) {
            var sqltext_content = $('#script_content_edit').val()
            nid = $('#myModal').attr('nid')
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_SqltextModify_ajax", //后台处理函数的url
                data: {
                    'nid': nid,
                    'sqltext_content': sqltext_content
                },
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading()
                },
                complete: function () {
                    hideLoading()
                },
                success: function (result) {
                    if (result == 'SUCCESS') {
                        location.reload()
                    } else {
                        alert(result)
                    }
                }
            })
        }

        //模态框居中
        $("#myModal_point_add_edit").on('show.bs.modal', function () {
            modalResize_add_edit();
        })
        $(window).resize(function () {
            modalResize_add_edit();
        })

        function modalResize_add_edit() {
            var winWidth = $(document.body).width();
            var modalWidth = $("#docModalContent").width();
            var width = (winWidth - modalWidth) / 2 + "px"
            console.log(winWidth, modalWidth, width)
            $("#myModal_point_add_edit").find(".modal-dialog").css({
                'margin-left': width
            });
        }

    </script>
{% endblock %}